<template>
  <div class="category-aside">
    <h1 class="title" @click="toCategoryIndex">
      <img class="icon" src="../../assets/svg/icon-category.svg" /> 文章分类
    </h1>

    <div
      class="category-item"
      v-for="(item, index) in categories"
      :key="item.categoryId"
    >
      <span class="num" v-text="index + 1">1</span>
      <div class="right">
        <router-link
          class="title"
          v-text="item.title"
          :to="{ path: '/category', query: { id: item.categoryId } }"
        >
          web前端
        </router-link>
        <p class="desc" v-text="item.desc">描述，记录web学习</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "category-aside",
  data() {
    return {
      categories: []
    };
  },
  methods: {
    async getAllCategory() {
      const { data: res } = await this.$api.webApi.getAllCategory();
      console.log(res);
      this.categories = res.data;
    },
    toCategoryIndex() {
      this.$router.push("/category");
    }
  },
  created() {
    this.getAllCategory();
  }
};
</script>

<style lang="scss" scoped>
.category-aside {
  background-color: #fff;
  border: 1px solid $border-color;
  border-radius: 10px;
  padding: 20px;

  .icon {
    width: 24px;
    vertical-align: middle;
  }

  h1.title {
    font-size: 18px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    cursor: pointer;
    &:hover {
      color: #30a9de;
    }
  }

  .category-item {
    display: flex;
    margin-top: 30px;

    .num {
      height: 40px;
      width: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      background-color: #30a9de;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;

      .title {
        color: #000;
        cursor: pointer;
        &:hover {
          color: #30a9de;
        }
      }

      .desc {
        color: $text-level-2;
        font-size: 13px;
      }
    }
  }
}
</style>
